//尝试发送请求，获取统计数据
axios.get('/dashboard').then( ({data:res}) =>{
    //  console.log(result)
     //解构方案1
    //  let {message, data:{groupData,overview} } =result
    //  console.log(overview)
    // 结构方案2
    let {overview, year,salaryData,groupData,provinceData} = res.data

    //设置嘴上买你的概览区得数据
    // console.log(overview)
    for(let key in overview) {
        document.querySelector(`[name=${key}]`).innerHTML = overview[key]
    }


    //调用创建图表得函数
    lineChart(year)        //折线图
    classSalaryChart(salaryData) //饼图
    groupSalaryChart(groupData) //柱状图
    sexSalaryChart(salaryData)  //饼图
    mapChart(provinceData)      //地图
})


// ------------------折线图:全学科薪资走向-------------------
// 1.得有盒子(页面已经有了    id="line")
// 2.引入echart.min.js(已经引入了)
function lineChart(data) {
    // let symbolPoint = {
    //     value:15000,
    //     symbolSize:20,

    // }
    // 3.初始化echarts
    let myChart = echarts.init(document.querySelector('#line'))
    // 4.配置项
    let option = {
        xAxis: {
            type: 'category',
            data: data.map(item => item.month),
            // x轴文字配置
            axisLabel: {
                color: '#999'
            },
            // 轴线设置
            axisLine: {
                // 轴线样式设置
                lineStyle: {
                    color: '#ccc',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            // Y轴分割线配置
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        // 标题配置
        title: {
            text: '2022全学科薪资走势',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 16
            }
        },
        // 鼠标移入提示
        tooltip: {
            // trigger: 'item', // 鼠标放到具体的小点上，会提示
            trigger: 'axis' // 表示鼠标放到轴上即可触发
        },
        // 直角坐标系网格设置（图表的大小设置）
        grid: {
            top: '20%'
        },
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        series: [
            {
                data: data.map(item=>item.salary),
                type: 'line',
                smooth: true, //平滑曲线
                //线条样式
                lineStyle: {
                    width: 6
                },
                //线条上的标记大小
                symbolSize: 10,
                //区域面积颜色
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, color: '#499FEE' // 0% 处的颜色
                            },
                            {
                                offset: 0.8, color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
                            },
                            {
                                offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            }
        ]

    }
    // 5.创建图表
    myChart.setOption(option)
}



// ------------------饼图:班级平均薪资---------------------

function classSalaryChart(data) {
    let myChart = echarts.init(document.querySelector('#salary'))
    let option = {
        title: {
            //标题文本
            text: '班级薪资分布',
            //文字颜色,大小
            textStyle: {
                fontSize: 16
            },
            //位置
            top: 15,
            left: 10
        },
        //鼠标移入的提示
        tooltip: {
            trigger: 'item'
        },

        //图例
        legend: {
            bottom: '6%',
            left: 'center'
        },
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
            {
                name: '班级薪资分布',
                type: 'pie', //表示饼图
                center: ['50%', '50%'], //中心点坐标
                radius: ['50%', '64%'], //内外圈的半径
                // avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10, //圆角
                    borderColor: '#fff', //边框颜色
                    borderWidth: 2 //边框大小
                },
                label: {
                    show: false,  //每个扇形的描述文字，不显示
                    position: 'center'
                },
                // emphasis: {
                //   label: {
                //     show: true,
                //     fontSize: '40',
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: { //视觉引导线
                    show: false //标签文字引导线
                },
                data:data.map(item=>{
                    return {
                        value:item.g_count + item.b_count,
                        name:item.label
                    }
                }) 
            }
        ]
    }
    myChart.setOption(option)
}



//-------------------柱状图:每组薪资---------------------
function groupSalaryChart(data) {
    let myChart = echarts.init(document.querySelector('#lines'))
    let option = {
        xAxis: {
             type: 'category',
             data: data[1].map(item =>item.name),
           axisLine:{
           lineStyle:{
           color:'#ccc',
       type:'dashed'
         }
           },
            
            axisLabel:{
            color:'#999'
           }
              },
              yAxis: {
              type: 'value',
             splitLine:{
               lineStyle:{
             type:'dashed'
             }
        },
             },
              grid:{
              left:70,
            top:30,
             right:30,
             bottom:50
              },
             color:[
             {
             type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
             y2: 1,
             colorStops: [{
             offset: 0, color: '#34D39A' // 0% 处的颜色
             }, {
              offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
             }],
             global: false // 缺省为 false
             },
             {
             type: 'linear',
             x: 0,
            y: 0,
             x2: 0,
             y2: 1,
             colorStops: [{
           offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
             offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }],
             global: false // 缺省为 false
             }
             ],
             tooltip:{
             triggerOn: 'mousemove',
              },
              series: [
            {
             data: data[1].map(item =>item.hope_salary), //期望薪资   []里的数字表示第几组
           type: 'bar',
           name:'期望薪资'
             },
             {
             data: data[1].map(item=> item.salary),  //就业薪资
           type: 'bar',
             name:'就业薪资'
         }
             ]
             };
             myChart.setOption(option)
           
       

    //找到8个按扭外的的盒子，注册事件
    document.querySelector('#btns').addEventListener('click',function(e){
        if(e.target.tagName === 'BUTTON'){
           //说明点击了某个按钮
           let i= e.target.innerHTML
        //    console.log(i) //组号
           //排他思想，处理效果
           document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
           e.target.classList.add('btn-blue')
           //更换图表中的数据（点击的是第几组，图表中应该展示该组数据）
           option.xAxis.data = data[i].map(item => item.name)
           option.series[0].data = data[i].map(item=>item.hope_salary)
           option.series[1].data = data[1].map(item=>item.salary)
           //重新创建图表
           myChart.setOption(option)
        }
    })
}

     //------------------饼图：男女生薪资分布--------------
     function sexSalaryChart(data) {
        let myChart = echarts.init(document.querySelector('#gender'))
        let option = {
            title: [
                {
                    //标题文本
                    text: '男女生薪资分布',
                    //文字颜色,大小
                    textStyle: {
                        fontSize: 16
                    },
                    //位置
                    top: 10,
                    left: 10
                },
                {
                    //标题文本
                    text: '男生',
                    //文字颜色,大小
                    textStyle: {
                        fontSize: 12
                    },
                    //位置
                    top: '45%',
                    left: '45%'
                },
                {
                    //标题文本
                    text: '女生',
                    //文字颜色,大小
                    textStyle: {
                        fontSize: 12
                    },
                    //位置
                    top: '85%',
                    left: '45%'
                },
            ],
            //鼠标移入的提示
            tooltip: {
                trigger: 'item'
            },
    
            //图例
            legend: {
                bottom: '6%',
                left: 'center'
            },
            color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
            series: [
                {
                    name: '男生生薪资分布',
                    type: 'pie', //表示饼图
                    center: ['50%', '30%'], //中心点坐标
                    radius: ['20%', '30%'], //内外圈的半径
                    data: data.map(item=>({name:item.label,value:item.b_count 
                    }))
                },
                {
                    name: '女生薪资分布',
                    type: 'pie', //表示饼图
                    center: ['50%', '70%'], //中心点坐标
                    radius: ['20%', '30%'], //内外圈的半径
                      data:data.map(item=>({name:item.label,value:item.b_count 
                    }))
                }
            ]
        }
        myChart.setOption(option)
    }
  
 

    //    -----------------地图：籍贯分布--------------------
    function mapChart (data){


        //准备好地图使用的数据
        const mapData = [
            { name: '南海诸岛', value: 0 },
            { name: '北京', value: 3 },
            { name: '天津', value: 2 },
            { name: '上海', value: 4 },
            { name: '重庆', value: 1 },
            { name: '河北', value: 20 },
            { name: '河南', value: 23 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 15 },
            { name: '黑龙江', value: 12 },
            { name: '湖南', value: 2 },
            { name: '安徽', value: 5 },
            { name: '山东', value: 18 },
            { name: '新疆', value: 0 },
            { name: '江苏', value: 5 },
            { name: '浙江', value: 1 },
            { name: '江西', value: 4 },
            { name: '湖北', value: 3 },
            { name: '广西', value: 2 },
            { name: '甘肃', value: 9 },
            { name: '山西', value: 11 },
            { name: '内蒙古', value: 14 },
            { name: '陕西', value: 14 },
            { name: '吉林', value: 10 },
            { name: '福建', value: 0 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 0 },
            { name: '青海', value: 3 },
            { name: '西藏', value: 0 },
            { name: '四川', value: 1 },
            { name: '宁夏', value: 1 },
            { name: '海南', value: 0 },
            { name: '台湾', value: 0 },
            { name: '香港', value: 0 },
            { name: '澳门', value: 0 }
          ]

          mapData.forEach(item => {
            // 每循环一次，在接口返回的数据中，有没有这个省的数据。如果有把value换掉
            let res = data.find(v => {
              return v.name.includes(item.name)
            })
            if (res) {
              item.value = res.value
            }
          })



        let myChart = echarts.init(document.querySelector('#map'))
        let option = {
            //鼠标移入提示
            tooltip:{
                formatter:'{a},{b},{c}位学员',  //a表示籍贯分布  b表示省的地区名  c表示多少位学员
                //调整样式
                backgroundColor:'rgba(0,0,0,0.5)',
                borderColor:'transparent',
                textStyle:{
                    color:'#fff'
                }
            },
            title: {
                //标题文本
                text: '籍贯分布',
                //文字颜色,大小
                textStyle: {
                    fontSize: 16
                },
                //位置
                top: 10,
                left: 10
            },
        //视觉映射组件
        visualMap: {
            type:'continuous',  //连续性
            // type:'piecewise' //分段式
            min:0,
            max:20,
            inRange:{
                color:['#fff','#0075F0']
            },
           text:[20,0],
           left:40,
           bottom:20
        },
          series:[{
            name:'籍贯分布',
            type:'map', //图表类型是地图
            map:'china', //中国地图
            data:mapData,  //指定数据
            label:{
                show:true,  //让省的名字显示
                fontSize:10,  //调整省的名字字体大小
                color:'rgba(0,0,0,0.7)'
            },
            itemStyle:{
                areaColor:'#E0FFFF',  //设置每个省的背景色
                borderColor:'rgba(0, 0, 0, 0.2)'    //省界限的名字
            },
            emphasis :{  //高亮状态下
                areaColor:'#34D39A',
                borderWidth:0,
                shadowBlur:20,      //阴影模糊大小
                shadowOffsetX:0,
                shadowOffsetY:0,
                shadowColor:'rgba(0, 0, 0, 0.5)'

            }
          }]
        }
        myChart.setOption(option)
    }
   